<script src="__CDN__/assets/libs/jquery/dist/jquery.min.js"></script>
<script src="__CDN__/assets/addons/tongcheng/js/vue.js"></script>
<link rel="stylesheet" type="text/css" href="__CDN__/assets/addons/tongcheng/css/common.css"></link>

<!--<div class="alert alert-info-light" style="margin-bottom:10px;">
  <b>提示：</b>用户配送距离超出配置的最大距离规则时，将无法配送（前端提示：距离超出配送范围）。
</div>-->

<div id="app">
  <form id="edit-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
    <div class="form-group hide">
      <label class="control-label col-xs-12 col-sm-2">{:__('Module_id')}:</label>
      <div class="col-xs-12 col-sm-8">
        <input id="c-module_id" data-rule="required" data-source="tongcheng/module/index" class="form-control selectpage"
               name="row[module_id]" type="text" value="{$row.module_id|htmlentities}" disabled>
      </div>
    </div>

    <div class="form-group">
      <label class="control-label col-xs-12 col-sm-2">{:__('Open_range')}:</label>
      <div class="col-xs-12 col-sm-8 m-t-5">
        <input id="c-open_range" name="row[open_range]" type="hidden" value="{$row.open_range}">
        <a href="javascript:;" data-toggle="switcher" class="btn-switcher" data-input-id="c-open_range" data-yes="1"
           data-no="0">
          <i class="fa fa-toggle-on text-success {eq name=" $row.open_range" value="0"}fa-flip-horizontal text-gray{/eq}
          fa-2x"></i>
        </a>
      </div>
    </div>

    <div class="form-group">
      <label class="control-label col-xs-12 col-sm-2">里程配置:</label>
      <div class="col-xs-12 col-sm-10">
        <input id="c-range_config" name="row[range_config]" type="hidden" value='{:json_encode($row.range_config)}'>

        <div v-for="(item, index) in range_config" :key="index">

          <!--最后一条规则-->
          <div class="row m-t-10" v-if="(index + 1) == range_config.length && range_config.length >= 2">
            <div class="col-xs-10 col-sm-10">
              <div class="input-group">
                <div class="input-group-addon" v-show="false">距离</div>
                <input :name="'row[range_config][' + index + '][start]'" v-show="false" type="number" step="1" min="0" class="form-control" v-model="item.start" readonly>
                <div class="input-group-addon">最大距离超过</div>
                <input :name="'row[range_config][' + index + '][end]'" type="number" step="1" min="0" class="form-control" v-model="item.end" readonly>
                <div class="input-group-addon">公里外，每公里计</div>
                <input :name="'row[range_config][' + index + '][fee]'" type="number" step="1" min="0" class="form-control" v-model="item.fee">
                <div class="input-group-addon">元</div>
              </div>
            </div>
          </div>

          <!--第一条规则-->
          <div class="row m-t-10" v-else-if="index == 0">
            <div class="col-xs-10 col-sm-10">
              <div class="input-group">
                <div class="input-group-addon">距离</div>
                <input :name="'row[range_config][' + index + '][start]'" v-show="false" type="number" step="1" min="0" class="form-control" v-model="item.start" readonly>
                <!--<div class="input-group-addon"></div>-->
                <input :name="'row[range_config][' + index + '][end]'" type="number" step="1" min="0" class="form-control" v-model="item.end" @change="(e) => changeEnd(e, index)">
                <div class="input-group-addon">公里内算起步价，计</div>
                <input :name="'row[range_config][' + index + '][fee]'" type="number" step="1" min="0" class="form-control" v-model="item.fee">
                <div class="input-group-addon">元</div>
              </div>
            </div>
          </div>

          <div class="row m-t-10" v-else>
            <div class="col-xs-10 col-sm-10">
              <div class="input-group">
                <div class="input-group-addon">距离</div>
                <input :name="'row[range_config][' + index + '][start]'" type="number" step="1" min="0" class="form-control" v-model="item.start" readonly>
                <div class="input-group-addon">至</div>
                <input :name="'row[range_config][' + index + '][end]'" type="number" step="1" min="0" class="form-control" v-model="item.end" @change="(e) => changeEnd(e, index)">
                <div class="input-group-addon">公里内，每公里计</div>
                <input :name="'row[range_config][' + index + '][fee]'" type="number" step="1" min="0" class="form-control" v-model="item.fee">
                <div class="input-group-addon">元</div>
              </div>
            </div>

            <div class="col-xs-2 col-sm-2" v-if="index > 0">
              <span class="btn btn-sm btn-danger" @click="remove(index)"><i class="fa fa-times"></i></span>
            </div>
          </div>
        </div>

        <div class="m-t-10">
          <a href="javascript:;" class="btn btn-sm btn-success" @click="add()"><i class="fa fa-plus"></i> 追加</a>
        </div>
      </div>

    </div>

    <div class="form-group layer-footer">
      <label class="control-label col-xs-12 col-sm-2"></label>
      <div class="col-xs-12 col-sm-8">
        <button type="submit" class="btn btn-primary btn-embossed disabled">{:__('OK')}</button>
        <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
      </div>
    </div>
  </form>
</div>

<script>
  var valid_result = false;
  var _range_config = '{:json_encode($row.range_config)}';//$('#c-range_config').val()

  var app = new Vue({
    el: '#app',
    data: {
      range_config: [],
    },
    created() {
      let range_config = []
      if (_range_config) {
        range_config = JSON.parse(_range_config)
      }
      if (!range_config) {
        this.range_config.push({
          start: 0,
          end: 5,
          fee: 1,
        })
        this.range_config.push({
          start: 5,
          end: 5,
          fee: 2,
        })
      } else {
        this.range_config = range_config
      }
      console.log('this.range_config', this.range_config, range_config, _range_config)
    },
    methods: {
      changeEnd(e, index) {
        if (index === this.range_config.length - 1) {
          return
        }

        this.range_config[index + 1].start = parseInt(e.target.value)
        this.range_config[index + 1].end = parseInt(this.range_config[index + 1].start) + 1

        // 最后一条规则距离保持与倒数第二条一致
        let last_prev = this.range_config[this.range_config.length - 2]
        this.range_config[this.range_config.length - 1].start = last_prev.end
        this.range_config[this.range_config.length - 1].end = last_prev.end
        // this.$forceUpdate()
      },
      // 加规则
      add() {
        let length = this.range_config.length
        let prev_index = length === 2 ? length - 1 : length - 2;
        let prev = this.range_config[prev_index]
        console.log('range prev', prev)

        if (prev.start === '' || prev.end === '' || prev.fee === '') {
          Fast.api.msg('请先填写上一条规则的完整数据')
          return
        }
        if (length > 1 && prev.fee <= 0) {
          Fast.api.msg('请填写正确的价格，必须大于0')
          return
        }
        if (length !== 2) {
          if (prev.start >= prev.end) {
            Fast.api.msg('请填写正确的范围，开始距离不能大于等于结束距离')
            return
          }
        }

        this.range_config.splice(-1, 0, {
          start: parseInt(prev.end),
          end: parseInt(prev.end) + 1,
          fee: 0,
        })

        // 最后一条规则距离保持与倒数第二条一致
        this.range_config[this.range_config.length - 1].start = parseInt(prev.end) + 1
        this.range_config[this.range_config.length - 1].end = parseInt(prev.end) + 1
        // this.range_config.push({
        //   start: parseInt(last.end),
        //   end: parseInt(last.end) + 1,
        //   fee: 0,
        // })
      },
      remove(index) {
        this.range_config.splice(index, 1)

        // 最后一条规则距离保持与倒数第二条一致
        let last_prev_rule = this.range_config[this.range_config.length - 2]
        this.range_config[this.range_config.length - 1].end = last_prev_rule.end
      },

      // 验证
      valid() {
        console.log('trigger valid')
        if (parseInt($('#c-open_range').val()) == 0) {
          valid_result = true
          return true
        }

        if (this.range_config.length === 0) {
          Fast.api.msg('请配置完整的范围规则')
          valid_result = false
          return false
        }

        valid_result = true
      }
    }
  })
</script>
